<template>
  <div id="TodayFree">
    <div class="TodayFree-box">
      <p>今日限免</p>
    </div>
    <div class="TodayFree-content">
      <!-- 上面 -->
      <div class="TodayFree-content-top" @click="GoSingleSetView">
        <img :src="TodayFree.image" alt="" />
        <div>
          <p>{{ TodayFree.title }}</p>
          <span>{{ TodayFree.author }}</span>
          <span>{{ TodayFree.subtitle }}</span>
        </div>
      </div>
    </div>
    <!-- 下面浅蓝色的 -->
    <div class="TodayFree-content-bot">
      <p class="van-multi-ellipsis--l2">{{ TodayFree.summary }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "TodayFree",
  props: ["TodayFree"],
  methods: {
    GoSingleSetView() {
      this.$router.push({
        path: "/SingleSetView",
        query: {
          article_id: this.TodayFree.article_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#TodayFree {
  padding-bottom: 0.625rem;
  .TodayFree-box {
    padding: 0.625rem 0;
  }
  .TodayFree-content {
    height: 6.875rem;
    padding: 0.625rem;
    box-sizing: border-box;
    background-color: white;
    box-shadow: var(--boxsizi);
    .TodayFree-content-top {
      display: flex;
      align-items: center;
      img {
        width: 5rem;
        height: 5rem;
      }
      div {
        padding: 0.625rem;
        p {
          font-size: 0.875rem;
          margin-bottom: 0.375rem;
        }
        span {
          font-size: 0.75rem;
          color: var(--fontcolor);
        }
      }
    }
  }
  .TodayFree-content-bot {
    padding: 0.625rem;
    background-color: #f1f5f9;
    box-shadow: var(--boxsizi);
    font-size: 0.875rem;
    p {
      line-height: 1rem;
    }
  }
}
</style>